<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<meta name="keywords" content="weather icons,animated icons,animated weather icons,svg animation,meteocons,weather,open source weather icons,icon pack,icons"/>
	<meta name="description" content="A free to use set of weather icons that are simple and animated."/>
	<meta name="robots" content="index,follow"/>
	<meta name="revisit-after" content="1 day"/>
	<meta name="author" content="Bas Milius"/>

	<title>Weather Icons by Bas</title>

	<link rel="stylesheet" href="https://unpkg.com/@latte-ui/css@2.0.0-dev.7/dist/latte-ui.css" type="text/css"/>
	<link rel="stylesheet" href="https://font.mili.us/css2?family=jetbrains-mono-variable:ital" type="text/css"/>
	<style>
        body
        {
            font-family: jetbrains-mono, monospace;
        }

        .wi-icons
        {
            position: relative;
            display: grid;
            grid-gap: 15px;
            grid-template-columns: repeat(5, 1fr);
        }

		.wi-icons-new
		{
            grid-gap: 9px;
			grid-template-columns: repeat(10, 1fr);
		}

        @media (max-width: 991px)
        {
            .wi-icons
            {
                grid-template-columns: repeat(3, 1fr);
            }

            .wi-icons-new
            {
                grid-gap: 9px;
                grid-template-columns: repeat(6, 1fr);
            }
        }

        @media (max-width: 767px)
        {
            .wi-icons
            {
                grid-template-columns: repeat(2, 1fr);
            }

            .wi-icons-new
            {
                grid-gap: 9px;
                grid-template-columns: repeat(4, 1fr);
            }
        }

        .wi-icon
        {
            position: relative;
            display: flex;
            padding: 24px 6px;
            align-items: center;
            flex-flow: column;
            justify-content: center;
            background: hsla(var(--gray-0));
            border-radius: 6px;
			box-shadow: var(--shadow-2);
        }

        .wi-icon img
        {
            position: relative;
            display: block;
            height: 120px;
            width: 120px;
            margin-bottom: 12px;
			transition: inherit;
        }

        .wi-icon span
        {
            font-size: 10px;
            font-weight: 500;
            text-align: center;
			transition: inherit;
        }

		.wi-icons-new .wi-icon
		{
            padding: 12px;
		}

		.wi-icons-new .wi-icon img
		{
            height: 60px;
            width: 60px;
			margin-bottom: 0;
		}

        @media (max-width: 767px)
        {
            .wi-icons-new .wi-icon img
            {
                height: 48px;
                width: 48px;
            }
        }

        .wi-section,
		.wi-title
        {
            display: inline-block;
			margin-top: 0;
            margin-bottom: 21px;
            padding-bottom: 6px;
            border-bottom: 2px solid hsl(var(--primary-500));
            font-size: 18px;
            font-weight: 700;
        }

		.wi-title
		{
            margin-bottom: 30px;
            padding-bottom: 12px;
			border-width: 4px;
            font-size: 24px;
		}

        .wi-icons + .wi-icons
        {
            margin-top: 15px;
        }

        .wi-icons + .wi-section
        {
            margin-top: 60px;
        }
	</style>
</head>
<body class="bg-gray-50">

	<main id="app">

		<div class="container my-7 md:my-10">
			<div class="row mb-10">
				<div class="col-12 lg:col-6 px-7 sm:px-4 lg:py-10">

					<h1 class="wi-title">Meteocons</h1>
					<p class="lead">
						These hand crafted icons are designed in Adobe Illustrator and animated with
						SVG animations. They will look stunning in your work.
					</p>
					<p>
						The icons are available under a MIT-license, which means that it's free to
						use. The only requirement is that you should preserve copyright notices in
						all source files.
					</p>
					<a href="https://github.com/basmilius/weather-icons" rel="noopener" target="_blank" class="btn btn-contained is-primary mt-5">
						<span>View on GitHub</span>
					</a>
					<a href="https://bas.dev" rel="noopener" target="_blank" class="btn btn-outline bg-gray-0 is-primary mt-5">
						<span class="text-gray-700">bas.dev</span>
					</a>

				</div>
			</div>

			<h2 class="wi-section mx-4 sm:mx-0">Newest icons</h2>
			<div class="wi-icons wi-icons-new">
				<div class="wi-icon"><img src="./production/line/all/smoke-particles.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/smoke.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/partly-cloudy-day-smoke.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/partly-cloudy-night-smoke.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/humidity.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/haze.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/haze-day.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/haze-night.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/partly-cloudy-day-haze.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/partly-cloudy-night-haze.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/dust.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/dust-day.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/dust-night.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/dust-wind.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/thunderstorms-snow.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/thunderstorms-day-snow.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/thunderstorms-night-snow.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/barometer.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/thermometer-colder.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/thermometer-warmer.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/thermometer-celsius.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/thermometer-fahrenheit.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/thermometer-glass.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/thermometer-glass-celsius.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/thermometer-glass-fahrenheit.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/thermometer-mercury.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/thermometer-mercury-cold.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/celsius.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/fahrenheit.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/not-available.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/umbrella.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/falling-stars.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/solar-eclipse.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/starry-night.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-0.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-1.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-2.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-3.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-4.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-5.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-6.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-7.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-8.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-9.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-10.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-11.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-12.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index-1.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index-2.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index-3.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index-4.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index-5.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index-6.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index-7.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index-8.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index-9.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index-10.svg" alt=""/></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index-11.svg" alt=""/></div>
			</div>

			<h2 class="wi-section mx-4 sm:mx-0">Weather</h2>
			<div class="wi-icons">
				<div class="wi-icon"><img src="./production/line/all/clear-day.svg" alt=""/><span>clear-day</span></div>
				<div class="wi-icon"><img src="./production/line/all/clear-night.svg" alt=""/><span>clear-night</span></div>
				<div class="wi-icon"><img src="./production/line/all/cloudy.svg" alt=""/><span>cloudy</span></div>
				<div class="wi-icon"><img src="./production/line/all/overcast.svg" alt=""/><span>overcast</span></div>
				<div class="wi-icon"><img src="./production/line/all/overcast-day.svg" alt=""/><span>overcast-day</span></div>
				<div class="wi-icon"><img src="./production/line/all/overcast-night.svg" alt=""/><span>overcast-night</span></div>
				<div class="wi-icon"><img src="./production/line/all/drizzle.svg" alt=""/><span>drizzle</span></div>
				<div class="wi-icon"><img src="./production/line/all/hail.svg" alt=""/><span>hail</span></div>
				<div class="wi-icon"><img src="./production/line/all/rain.svg" alt=""/><span>rain</span></div>
				<div class="wi-icon"><img src="./production/line/all/sleet.svg" alt=""/><span>sleet</span></div>
				<div class="wi-icon"><img src="./production/line/all/smoke.svg" alt=""/><span>smoke</span></div>
				<div class="wi-icon"><img src="./production/line/all/snow.svg" alt=""/><span>snow</span></div>
				<div class="wi-icon"><img src="./production/line/all/partly-cloudy-day.svg" alt=""/><span>partly-cloudy-day</span></div>
				<div class="wi-icon"><img src="./production/line/all/partly-cloudy-day-drizzle.svg" alt=""/><span>partly-cloudy-day-drizzle</span></div>
				<div class="wi-icon"><img src="./production/line/all/partly-cloudy-day-hail.svg" alt=""/><span>partly-cloudy-day-hail</span></div>
				<div class="wi-icon"><img src="./production/line/all/partly-cloudy-day-rain.svg" alt=""/><span>partly-cloudy-day-rain</span></div>
				<div class="wi-icon"><img src="./production/line/all/partly-cloudy-day-sleet.svg" alt=""/><span>partly-cloudy-day-sleet</span></div>
				<div class="wi-icon"><img src="./production/line/all/partly-cloudy-day-smoke.svg" alt=""/><span>partly-cloudy-day-smoke</span></div>
				<div class="wi-icon"><img src="./production/line/all/partly-cloudy-day-snow.svg" alt=""/><span>partly-cloudy-day-snow</span></div>
				<div class="wi-icon"><img src="./production/line/all/partly-cloudy-night.svg" alt=""/><span>partly-cloudy-night</span></div>
				<div class="wi-icon"><img src="./production/line/all/partly-cloudy-night-drizzle.svg" alt=""/><span>partly-cloudy-night-drizzle</span></div>
				<div class="wi-icon"><img src="./production/line/all/partly-cloudy-night-hail.svg" alt=""/><span>partly-cloudy-night-hail</span></div>
				<div class="wi-icon"><img src="./production/line/all/partly-cloudy-night-rain.svg" alt=""/><span>partly-cloudy-night-rain</span></div>
				<div class="wi-icon"><img src="./production/line/all/partly-cloudy-night-sleet.svg" alt=""/><span>partly-cloudy-night-sleet</span></div>
				<div class="wi-icon"><img src="./production/line/all/partly-cloudy-night-smoke.svg" alt=""/><span>partly-cloudy-night-smoke</span></div>
				<div class="wi-icon"><img src="./production/line/all/partly-cloudy-night-snow.svg" alt=""/><span>partly-cloudy-night-snow</span></div>
				<div class="wi-icon"><img src="./production/line/all/mist.svg" alt=""/><span>mist</span></div>
				<div class="wi-icon"><img src="./production/line/all/hurricane.svg" alt=""/><span>hurricane</span></div>
				<div class="wi-icon"><img src="./production/line/all/tornado.svg" alt=""/><span>tornado</span></div>
				<div class="wi-icon"><img src="./production/line/all/wind.svg" alt=""/><span>wind</span></div>
				<div class="wi-icon"><img src="./production/line/all/dust.svg" alt=""/><span>dust</span></div>
				<div class="wi-icon"><img src="./production/line/all/dust-day.svg" alt=""/><span>dust-day</span></div>
				<div class="wi-icon"><img src="./production/line/all/dust-night.svg" alt=""/><span>dust-night</span></div>
				<div class="wi-icon"><img src="./production/line/all/dust-wind.svg" alt=""/><span>dust-wind</span></div>
			</div>
			<div class="wi-icons">
				<div class="wi-icon"><img src="./production/line/all/thunderstorms.svg" alt=""/><span>thunderstorms</span></div>
				<div class="wi-icon"><img src="./production/line/all/thunderstorms-day.svg" alt=""/><span>thunderstorms-day</span></div>
				<div class="wi-icon"><img src="./production/line/all/thunderstorms-night.svg" alt=""/><span>thunderstorms-night</span></div>
				<div class="wi-icon"><img src="./production/line/all/thunderstorms-rain.svg" alt=""/><span>thunderstorms-rain</span></div>
				<div class="wi-icon"><img src="./production/line/all/thunderstorms-day-rain.svg" alt=""/><span>thunderstorms-day-rain</span></div>
				<div class="wi-icon"><img src="./production/line/all/thunderstorms-night-rain.svg" alt=""/><span>thunderstorms-night-rain</span></div>
				<div class="wi-icon"><img src="./production/line/all/thunderstorms-snow.svg" alt=""/><span>thunderstorms-snow</span></div>
				<div class="wi-icon"><img src="./production/line/all/thunderstorms-day-snow.svg" alt=""/><span>thunderstorms-day-snow</span></div>
				<div class="wi-icon"><img src="./production/line/all/thunderstorms-night-snow.svg" alt=""/><span>thunderstorms-night-snow</span></div>
			</div>
			<div class="wi-icons">
				<div class="wi-icon"><img src="./production/line/all/fog.svg" alt=""/><span>fog</span></div>
				<div class="wi-icon"><img src="./production/line/all/fog-day.svg" alt=""/><span>fog-day</span></div>
				<div class="wi-icon"><img src="./production/line/all/fog-night.svg" alt=""/><span>fog-night</span></div>
				<div class="wi-icon"><img src="./production/line/all/partly-cloudy-day-fog.svg" alt=""/><span>partly-cloudy-day-fog</span></div>
				<div class="wi-icon"><img src="./production/line/all/partly-cloudy-night-fog.svg" alt=""/><span>partly-cloudy-night-fog</span></div>
			</div>
			<div class="wi-icons">
				<div class="wi-icon"><img src="./production/line/all/haze.svg" alt=""/><span>haze</span></div>
				<div class="wi-icon"><img src="./production/line/all/haze-day.svg" alt=""/><span>haze-day</span></div>
				<div class="wi-icon"><img src="./production/line/all/haze-night.svg" alt=""/><span>haze-night</span></div>
				<div class="wi-icon"><img src="./production/line/all/partly-cloudy-day-haze.svg" alt=""/><span>partly-cloudy-day-haze</span></div>
				<div class="wi-icon"><img src="./production/line/all/partly-cloudy-night-haze.svg" alt=""/><span>partly-cloudy-night-haze</span></div>
			</div>

			<h2 class="wi-section mx-4 sm:mx-0">Astronomical</h2>
			<div class="wi-icons">
				<div class="wi-icon"><img src="./production/line/all/horizon.svg" alt=""/><span>horizon</span></div>
				<div class="wi-icon"><img src="./production/line/all/sunrise.svg" alt=""/><span>sunrise</span></div>
				<div class="wi-icon"><img src="./production/line/all/sunset.svg" alt=""/><span>sunset</span></div>
				<div class="wi-icon"><img src="./production/line/all/moonrise.svg" alt=""/><span>moonrise</span></div>
				<div class="wi-icon"><img src="./production/line/all/moonset.svg" alt=""/><span>moonset</span></div>
				<div class="wi-icon"><img src="./production/line/all/falling-stars.svg" alt=""/><span>falling-stars</span></div>
				<div class="wi-icon"><img src="./production/line/all/solar-eclipse.svg" alt=""/><span>solar-eclipse</span></div>
				<div class="wi-icon"><img src="./production/line/all/starry-night.svg" alt=""/><span>starry-night</span></div>
			</div>

			<h2 class="wi-section mx-4 sm:mx-0">Moon Phases</h2>
			<div class="wi-icons">
				<div class="wi-icon"><img src="./production/line/all/moon-new.svg" alt=""/><span>moon-new</span></div>
				<div class="wi-icon"><img src="./production/line/all/moon-waxing-crescent.svg" alt=""/><span>moon-waxing-crescent</span></div>
				<div class="wi-icon"><img src="./production/line/all/moon-first-quarter.svg" alt=""/><span>moon-first-quarter</span></div>
				<div class="wi-icon"><img src="./production/line/all/moon-waxing-gibbous.svg" alt=""/><span>moon-waxing-gibbous</span></div>
				<div class="wi-icon"><img src="./production/line/all/moon-full.svg" alt=""/><span>moon-full</span></div>
				<div class="wi-icon"><img src="./production/line/all/moon-waning-gibbous.svg" alt=""/><span>moon-waning-gibbous</span></div>
				<div class="wi-icon"><img src="./production/line/all/moon-last-quarter.svg" alt=""/><span>moon-last-quarter</span></div>
				<div class="wi-icon"><img src="./production/line/all/moon-waning-crescent.svg" alt=""/><span>moon-waning-crescent</span></div>
			</div>

			<h2 class="wi-section mx-4 sm:mx-0">Miscellaneous</h2>
			<div class="wi-icons">
				<div class="wi-icon"><img src="./production/line/all/barometer.svg" alt=""/><span>barometer</span></div>
				<div class="wi-icon"><img src="./production/line/all/compass.svg" alt=""/><span>compass</span></div>
				<div class="wi-icon"><img src="./production/line/all/windsock.svg" alt=""/><span>windsock</span></div>
				<div class="wi-icon"><img src="./production/line/all/thermometer.svg" alt=""/><span>thermometer</span></div>
				<div class="wi-icon"><img src="./production/line/all/thermometer-colder.svg" alt=""/><span>thermometer-colder</span></div>
				<div class="wi-icon"><img src="./production/line/all/thermometer-warmer.svg" alt=""/><span>thermometer-warmer</span></div>
				<div class="wi-icon"><img src="./production/line/all/thermometer-celsius.svg" alt=""/><span>thermometer-celsius</span></div>
				<div class="wi-icon"><img src="./production/line/all/thermometer-fahrenheit.svg" alt=""/><span>thermometer-fahrenheit</span></div>
				<div class="wi-icon"><img src="./production/line/all/thermometer-glass.svg" alt=""/><span>thermometer-glass</span></div>
				<div class="wi-icon"><img src="./production/line/all/thermometer-glass-celsius.svg" alt=""/><span>thermometer-glass-celsius</span></div>
				<div class="wi-icon"><img src="./production/line/all/thermometer-glass-fahrenheit.svg" alt=""/><span>thermometer-glass-fahrenheit</span></div>
				<div class="wi-icon"><img src="./production/line/all/thermometer-mercury.svg" alt=""/><span>thermometer-mercury</span></div>
				<div class="wi-icon"><img src="./production/line/all/thermometer-mercury-cold.svg" alt=""/><span>thermometer-mercury-cold</span></div>
				<div class="wi-icon"><img src="./production/line/all/humidity.svg" alt=""/><span>humidity</span></div>
				<div class="wi-icon"><img src="./production/line/all/pressure-high.svg" alt=""/><span>pressure-high</span></div>
				<div class="wi-icon"><img src="./production/line/all/pressure-low.svg" alt=""/><span>pressure-low</span></div>
				<div class="wi-icon"><img src="./production/line/all/pressure-high-alt.svg" alt=""/><span>pressure-high-alt</span></div>
				<div class="wi-icon"><img src="./production/line/all/pressure-low-alt.svg" alt=""/><span>pressure-low-alt</span></div>
				<div class="wi-icon"><img src="./production/line/all/celsius.svg" alt=""/><span>celsius</span></div>
				<div class="wi-icon"><img src="./production/line/all/fahrenheit.svg" alt=""/><span>fahrenheit</span></div>
				<div class="wi-icon"><img src="./production/line/all/not-available.svg" alt=""/><span>not-available</span></div>
				<div class="wi-icon"><img src="./production/line/all/umbrella.svg" alt=""/><span>umbrella</span></div>
			</div>

			<h2 class="wi-section mx-4 sm:mx-0">Particles</h2>
			<div class="wi-icons">
				<div class="wi-icon"><img src="./production/line/all/lightning-bolt.svg" alt=""/><span>lightning-bolt</span></div>
				<div class="wi-icon"><img src="./production/line/all/raindrop.svg" alt=""/><span>raindrop</span></div>
				<div class="wi-icon"><img src="./production/line/all/raindrops.svg" alt=""/><span>raindrops</span></div>
				<div class="wi-icon"><img src="./production/line/all/snowflake.svg" alt=""/><span>snowflake</span></div>
				<div class="wi-icon"><img src="./production/line/all/star.svg" alt=""/><span>star</span></div>
				<div class="wi-icon"><img src="./production/line/all/smoke-particles.svg" alt=""/><span>smoke-particles</span></div>
			</div>

			<h2 class="wi-section mx-4 sm:mx-0">Beaufort Wind Scale</h2>
			<div class="wi-icons">
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-0.svg" alt=""/><span>wind-beaufort-0</span></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-1.svg" alt=""/><span>wind-beaufort-1</span></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-2.svg" alt=""/><span>wind-beaufort-2</span></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-3.svg" alt=""/><span>wind-beaufort-3</span></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-4.svg" alt=""/><span>wind-beaufort-4</span></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-5.svg" alt=""/><span>wind-beaufort-5</span></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-6.svg" alt=""/><span>wind-beaufort-6</span></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-7.svg" alt=""/><span>wind-beaufort-7</span></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-8.svg" alt=""/><span>wind-beaufort-8</span></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-9.svg" alt=""/><span>wind-beaufort-9</span></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-10.svg" alt=""/><span>wind-beaufort-10</span></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-11.svg" alt=""/><span>wind-beaufort-11</span></div>
				<div class="wi-icon"><img src="./production/line/all/wind-beaufort-12.svg" alt=""/><span>wind-beaufort-12</span></div>
			</div>

			<h2 class="wi-section mx-4 sm:mx-0">UV Index</h2>
			<div class="wi-icons">
				<div class="wi-icon"><img src="./production/line/all/uv-index.svg" alt=""/><span>uv-index</span></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index-1.svg" alt=""/><span>uv-index-1</span></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index-2.svg" alt=""/><span>uv-index-2</span></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index-3.svg" alt=""/><span>uv-index-3</span></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index-4.svg" alt=""/><span>uv-index-4</span></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index-5.svg" alt=""/><span>uv-index-5</span></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index-6.svg" alt=""/><span>uv-index-6</span></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index-7.svg" alt=""/><span>uv-index-7</span></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index-8.svg" alt=""/><span>uv-index-8</span></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index-9.svg" alt=""/><span>uv-index-9</span></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index-10.svg" alt=""/><span>uv-index-10</span></div>
				<div class="wi-icon"><img src="./production/line/all/uv-index-11.svg" alt=""/><span>uv-index-11</span></div>
			</div>

			<h2 class="wi-section mx-4 sm:mx-0">All styles</h2>
			<div class="row">
				<div class="col-6 lg:col-4">

					<a href="index-fill.html" class="panel bg-gray-0 rounded-1 shadow-2 d-flex flex-column align-items-center p-7">
						<img src="./production/fill/all/clear-day.svg" alt="Filled icon style" height="120"/>
						<span class="h5">Filled</span>
					</a>

				</div>
				<div class="col-6 lg:col-4">

					<a href="index-line.html" class="panel bg-gray-0 rounded-1 shadow-2 d-flex flex-column align-items-center p-7">
						<img src="./production/line/all/clear-day.svg" alt="Outlined icon style" height="120"/>
						<span class="h5">Outlined</span>
					</a>

				</div>
			</div>
		</div>

	</main>

</body>
</html>
